<div id="header" class="rounded-xl bg-white py-2 px-3 my-4 mx-6 flex justify-between flex-wrap text-neutral-800 absolute left-0 right-0">

  <a routerLink="index" class="font-bold  py-2 text-lg mx-4 leading-4">
    <img src="assets/imgs/nevegy_logo.png" alt="logo" class="w-[150px]">
  </a>

  <button id="mobileBtn" class="mr-2 py-1 px-3 rounded-md border-[1px] lg:hidden" [ngClass]="{'open': mobileMenuOpen}" (click)="toggleMenu()">
    <span class="block relative w-[22px] h-[1px] rounded-[1px] bg-neutral-600"></span>
    <span class="block relative w-[22px] h-[1px] rounded-[1px] mt-[4px] bg-neutral-600"></span>
    <span class="block relative w-[22px] h-[1px] rounded-[1px] mt-[4px] bg-neutral-600"></span>
  </button>

  <div id="nav" class="lg:flex lg:items-center lg:h-auto lg:w-auto lg:overflow-visible relative w-full h-0 overflow-hidden" [ngClass]="{'show': mobileMenuOpen}">
    <a class="flex items-center p-2 font-normal text-sm mx-2 hover:text-black cursor-pointer" (click)="closeMenu()" [routerLink]="['/index']" routerLinkActive="bg-gray-200 rounded-md">
      <i class="bi bi-house-door mr-2"></i>
      <span>Nevegy</span>
    </a>
    <a class="flex items-center p-2 font-normal text-sm mx-2 hover:text-black cursor-pointer" (click)="closeMenu()" [routerLink]="['/sustainability']" routerLinkActive="bg-gray-200 rounded-md">
      <i class="bi bi-flower3 mr-2"></i>
      <span>Sustainability</span>
    </a>
    <a class="flex items-center p-2 font-normal text-sm mx-2 hover:text-black cursor-pointer" (click)="closeMenu()" [routerLink]="['/energy']" routerLinkActive="bg-gray-200 rounded-md">
      <i class="bi bi-lightning mr-2"></i>
      <span>Energy</span>
    </a>
    <a class="flex items-center p-2 font-normal text-sm mx-2 hover:text-black cursor-pointer" (click)="closeMenu()" [routerLink]="['/air']" routerLinkActive="bg-gray-200 rounded-md">
      <i class="bi bi-list mr-2"></i>
      <span>Healthy Buildings</span>
    </a>
    <a class="lg:flex items-center p-2 font-normal text-sm mx-2 relative hover:text-black sub-menu cursor-pointer" (click)="subMenushow()">
      <p class="inline-block lg:py-0 py-2">
        <span>Solutions</span>
        <i class="bi bi bi-chevron-down ml-2 transition-all duration-300 ease-in-out"></i>
      </p>
      <ul
        class="lg:absolute lg:top-full lg:right-0 lg:z-20 lg:shadow-xl lg:shadow-neutral-950 bg-white whitespace-nowrap rounded-md" [ngClass]="{'show': mobileSubMenuOpen}">
        <li><a class="block px-4 p-2 text-neutral-800 hover:text-neutral-500" (click)="closeMenu()" [routerLink]="['/cre']" routerLinkActive="bg-gray-200 rounded-md">Commercial Real Estate</a></li>
        <li><a class="block px-4 p-2 text-neutral-800 hover:text-neutral-500" (click)="closeMenu()" [routerLink]="['/hotels']" routerLinkActive="bg-gray-200 rounded-md">Hotels</a></li>
        <li><a class="block px-4 p-2 text-neutral-800 hover:text-neutral-500" (click)="closeMenu()" [routerLink]="['/marine']" routerLinkActive="bg-gray-200 rounded-md">Marine</a></li>
        <li><a class="block px-4 p-2 text-neutral-800 hover:text-neutral-500" (click)="closeMenu()" [routerLink]="['/food']" routerLinkActive="bg-gray-200 rounded-md">Food Protection</a></li>
      </ul>
    </a>
  </div>
</div>
